<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Web OTP API Simplest测测试</title>
    <meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>div {font-family: sans-serif;}</style>
	<script src="js/vconsole.min.js"></script>
  </head>
  <body>
   
    <div style="border:1px solid; padding: 5px; 10px; margin: 10px 0;">
      <form>
        Enter OTP here:
        <input type="text"
		 autocomplete="one-time-code" 
		 inputmode="numeric" 
		 pattern="\d{6}"
		 required >
        <input type="submit" value="Submit">
      </form>
    </div>
 
 
    <script>
		new VConsole();
		console.log("window  === 00",window);
  console.log("OTPCredential++++   === 00",window["OTPCredential"]);
    if ('OTPCredential' in window) {
	  console.log("OTPCredential++++   === 1");
      window.addEventListener('DOMContentLoaded', e => {
        const input = document.querySelector('input[autocomplete="one-time-code"]');
        if (!input) return;
        const ac = new AbortController();
        const form = input.closest('form');
        if (form) {
          form.addEventListener('submit', e => {
            ac.abort();
          });
        }
		 console.log("OTPCredential++++   ===== 2");
        navigator.credentials.get({
          otp: { transport:['sms'] },
          signal: ac.signal
        }).then(otp => {
			console.log("otp:",otp)
          input.value = otp.code;
          if (form) form.submit();
        }).catch(err => {
          console.log("otp:",err);
        });
	    console.log("OTPCredential++++ ==== 3");
      });
	}else{
		console.log("OTPCredential-- 0");
	}
    </script>
  </body>
</html>
